<template>
    <div>
        <el-form :inline="true" :model="condition" class="search-form" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="结算单位">
                        {{ orgName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="结算月度起">
                        <el-date-picker v-model="condition['search_GTE_accountMonth']"
                                        :picker-options="startPickerOptions" value-format="yyyy-MM" type="month"
                                        placeholder="起始日期"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="结算月度止">
                        <el-date-picker v-model="condition['search_LTE_accountMonth']"
                                        :picker-options="endPickerOptions" value-format="yyyy-MM" type="month"
                                        placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-button type="primary" class="ml-80" @click="loadData">查 询</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row type="flex" justify="end" class="mt-10 ">
            <el-col :span="24" style="display: flex;justify-content: space-between">
                <title-point color="#50B155">
                    <div slot="content">
                        总艘次 :
                        <span style="font-size: 16px">{{ totalVoyNum }}</span>
                    </div>
                </title-point>
                <title-point color="#449DFF">
                    <div slot="content">
                        总理箱TEU :
                        <span style="font-size: 16px">{{ totalTeu }}</span></div>
                </title-point>
                <title-point color="#30C8CA">
                    <div slot="content">
                        应结金额 :
                        <span style="font-size: 16px">{{ accountFee }}</span></div>
                </title-point>
            </el-col>
        </el-row>
        <div style="display: flex">
            <div id="pieOne" class="balance-classCount-style"></div>
            <div id="pieTwo" class="balance-classCount-style"></div>
        </div>
        <el-row type="flex" justify="end" class="mt-10 ">
            <el-col :span="24" style="display: flex;justify-content: space-between">
                <title-point color="#50B155">
                    <div slot="content">
                        卸船艘次 :
                        <span style="font-size: 16px">{{ unloadVoyNum }}</span>
                    </div>
                </title-point>
                <title-point color="#449DFF">
                    <div slot="content">
                        卸船理箱TEU :
                        <span style="font-size: 16px">{{ unloadTeu }}</span></div>
                </title-point>
                <title-point color="#30C8CA">
                    <div slot="content">
                        装船艘次 :
                        <span style="font-size: 16px">{{ uploadVoyNum }}</span></div>
                </title-point>
                <title-point color="#50B155">
                    <div slot="content">
                        装船理箱TEU :
                        <span style="font-size: 16px">{{ uploadTeu }}</span>
                    </div>
                </title-point>
                <title-point color="#449DFF">
                    <div slot="content">
                        特殊理箱TEU :
                        <span style="font-size: 16px">{{ specialTeu }}</span></div>
                </title-point>
            </el-col>
        </el-row>
        <el-table :data="list" border stripe max-height="500" class="mt-10">
            <el-table-column type="index" fixed="left" label="序号" width="55"></el-table-column>
            <el-table-column prop="accountMonth" label="结算月度"  min-width="120"></el-table-column>
            <el-table-column prop="unloadVoyNum" label="卸船艘次"  min-width="110"></el-table-column>
            <el-table-column prop="unloadTeu" label="卸船理箱TEU"  min-width="140"></el-table-column>
            <el-table-column prop="uploadVoyNum" label="装船艘次"  min-width="110"></el-table-column>
            <el-table-column prop="uploadTeu" label="装船理箱TEU"  min-width="140"></el-table-column>
            <el-table-column prop="specialTeu" label="特殊理箱TEU"  min-width="140"></el-table-column>
            <el-table-column prop="totalTeu" label="总理箱TEU"  min-width="140"></el-table-column>
            <el-table-column prop="accountFee" label="应结金额"  min-width="160"></el-table-column>
            <el-table-column prop="createUser" label="创建人"  min-width="100"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"  min-width="160"></el-table-column>
            <el-table-column fixed="right" align="center" label="操作"  width="140">
                <template slot-scope="scope">
                    <el-button size="small" type="text"
                               @click="handleSee(scope.row)">查看
                    </el-button>
                    <el-button size="small" type="text"
                               @click="handleDownload(scope.row)">下载
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import { countBillDownload, countBillPage } from "../../../api/shipPlan/shipPlan";
    import {
        downloadFile
    } from "@/api/balance/balance";
    import titlePoint from '../common/title-point'

    // 引入基本模板
    let echarts = require("echarts/lib/echarts");
    import "echarts/theme/macarons";
    // 引入提示框和title组件
    require("echarts/lib/component/tooltip");
    require("echarts/lib/component/title");
    require("echarts/lib/chart/pie");
    export default {
        name: "账单查询",
        components: { titlePoint },
        data() {
            return {
                orgName: '',
                condition: {
                    search_GTE_accountMonth: '',
                    search_LTE_accountMonth: '',
                },
                list: [],
                unloadVoyNum: 0,
                unloadTeu: 0,
                uploadVoyNum: 0,
                uploadTeu: 0,
                specialTeu: 0,
                totalTeu: 0,
                totalVoyNum: 0,
                accountFee: 0
            }
        },
        mounted() {
            this.orgName = this.$store.state.user.currentUser.name
            let data = sessionStorage.getItem('bill-params')
            if (data) {
                let time = JSON.parse(data)
                this.condition.search_GTE_createDateTime = time.search_GTE_createDateTime
                this.condition.search_LTE_createDateTime = time.search_LTE_createDateTime
            }
            this.loadData()
        },
        methods: {
            loadData() {
                let params = this.$assist.copySearchConditions(this.condition)
                countBillPage(params).then(res => {
                    const count = res.data.total
                    this.list = res.data.aaData
                    this.unloadVoyNum = count.unloadVoyNum
                    this.unloadTeu = count.unloadTeu
                    this.uploadVoyNum = count.uploadVoyNum
                    this.uploadTeu = count.uploadTeu
                    this.specialTeu = count.specialTeu
                    this.totalTeu = count.totalTeu
                    this.totalVoyNum = count.totalVoyNum
                    this.accountFee = count.accountFee

                    this.pieOne = echarts.init(
                        document.getElementById("pieOne"),
                        "macarons"
                    );
                    this.pieOne.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: ['装船', '卸船']
                        },
                        series: [
                            {
                                // name: '访问来源',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: [{ value: this.uploadVoyNum, name: '装船' }, {
                                    value: this.unloadVoyNum,
                                    name: '卸船'
                                }],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    })
                    this.pieTwo = echarts.init(
                        document.getElementById("pieTwo"),
                        "macarons"
                    );
                    this.pieTwo.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: ['装船', '卸船', '特殊箱']
                        },
                        series: [
                            {
                                // name: '访问来源',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: [{ value: this.uploadTeu, name: '装船' }, {
                                    value: this.unloadTEU,
                                    name: '卸船'
                                }, { value: this.specialTeu, name: '特殊箱' }],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    })
                })
            },
            handleSee(item) {
                sessionStorage.setItem('balanceDetailId', item.id)
                this.$router.push({ path: '/work/balanceDetail', name: '对账单查看' })
            },
            handleDownload(item) {
                downloadFile(item.id).then(res => {
                    //这里res是返回的blob对象
                    var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
                    var downloadElement = document.createElement('a');
                    var href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = "账单总汇"; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
            }
        },
        computed: {
            startPickerOptions() {
                let endDate = this.condition["search_LTE_accountMonth"];
                return {
                    disabledDate(time) {
                        if (endDate) {
                            return time.getTime() > new Date(endDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            },
            endPickerOptions() {
                let startDate = this.condition["search_GTE_accountMonth"];
                return {
                    disabledDate(time) {
                        if (startDate) {
                            return time.getTime() < new Date(startDate).getTime() - 60 * 60 * 24 * 1000;
                        } else {
                            return false;
                        }
                    }
                };
            },
        },
    }
</script>

<style scoped>
    #pieOne {
        height: 300px;
    }

    .balance-classCount-style {
        height: 300px;
        width: 100%;
    }
</style>
